<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jiahua Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Muhammad Usman">

<!-- The styles -->
<link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet">
<style type="text/css">
body {
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/charisma-app.css" rel="stylesheet">
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">
<link href='css/fullcalendar.css' rel='stylesheet'>
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print'>
<link href='css/chosen.css' rel='stylesheet'>
<link href='css/uniform.default.css' rel='stylesheet'>
<link href='css/colorbox.css' rel='stylesheet'>
<link href='css/jquery.cleditor.css' rel='stylesheet'>
<link href='css/jquery.noty.css' rel='stylesheet'>
<link href='css/noty_theme_default.css' rel='stylesheet'>
<link href='css/elfinder.min.css' rel='stylesheet'>
<link href='css/elfinder.theme.css' rel='stylesheet'>
<link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
<link href='css/opa-icons.css' rel='stylesheet'>
<link href='css/uploadify.css' rel='stylesheet'>
<style type="text/css">

/* Apply these styles only when #preview-pane has
	   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
	display: block;
	position: absolute;
	z-index: 2000;
	top: 10px;
	right: -280px;
	padding: 6px;
	border: 1px rgba(0, 0, 0, .4) solid;
	background-color: white;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop area based on the size of the thumbnail preview, specified here */
#preview-pane .preview-container {
	width: 250px;
	height: 170px;
	overflow: hidden;
}
</style>
<!-- The fav icon -->
<link rel="shortcut icon" href="img/favicon.ico">
</head>

<body>
	<!-- Header file -->
	<jsp:include page="100-header.jsp" flush="true" />

	<div class="container-fluid">
		<div class="row-fluid">

			<!-- Header file -->
			<jsp:include page="100-menu.jsp" flush="true" />

			<noscript>
				<div class="alert alert-block span10">
					<h4 class="alert-heading">Warning!</h4>
					<p>
						You need to have <a href="http://en.wikipedia.org/wiki/JavaScript"
							target="_blank">JavaScript</a> enabled to use this site.
					</p>
				</div>
			</noscript>

			<div id="content" class="span10">
				<!-- content starts -->


				<div>
					<ul class="breadcrumb">
						<li><a href="#">Home</a> <span class="divider">/</span></li>
						<li><a href="#">Dashboard</a></li>
					</ul>
				</div>
				<div class="sortable row-fluid">
					<a data-rel="tooltip" title="6 new members."
						class="well span3 top-block" href="#"> <span
						class="icon32 icon-red icon-user"></span>
						<div>Total Members</div>
						<div>507</div> <span class="notification">6</span>
					</a> <a data-rel="tooltip" title="4 new pro members."
						class="well span3 top-block" href="#"> <span
						class="icon32 icon-color icon-star-on"></span>
						<div>Pro Members</div>
						<div>228</div> <span class="notification green">4</span>
					</a> <a data-rel="tooltip" title="$34 new sales."
						class="well span3 top-block" href="#"> <span
						class="icon32 icon-color icon-cart"></span>
						<div>Sales</div>
						<div>$13320</div> <span class="notification yellow">$34</span>
					</a> <a data-rel="tooltip" title="12 new messages."
						class="well span3 top-block" href="#"> <span
						class="icon32 icon-color icon-envelope-closed"></span>
						<div>Messages</div>
						<div>25</div> <span class="notification red">12</span>
					</a>
				</div>


				<div class="row-fluid sortable">
					<div class="box span4">
						<div class="box-header well" data-original-title>
							<h2>
								<i class="icon-list"></i> Weekly Stat
							</h2>
							<div class="box-icon">
								<a href="#" class="btn btn-setting btn-round"><i
									class="icon-cog"></i></a> <a href="#"
									class="btn btn-minimize btn-round"><i
									class="icon-chevron-up"></i></a> <a href="#"
									class="btn btn-close btn-round"><i class="icon-remove"></i></a>
							</div>
						</div>
						<div class="box-content">
							<ul class="dashboard-list">
								<li><a href="#"> <i class="icon-arrow-up"></i> <span
										class="green">92</span> New Comments
								</a></li>
								<li><a href="#"> <i class="icon-arrow-down"></i> <span
										class="red">15</span> New Registrations
								</a></li>
								<li><a href="#"> <i class="icon-minus"></i> <span
										class="blue">36</span> New Articles
								</a></li>
								<li><a href="#"> <i class="icon-comment"></i> <span
										class="yellow">45</span> User reviews
								</a></li>
								<li><a href="#"> <i class="icon-arrow-up"></i> <span
										class="green">112</span> New Comments
								</a></li>
								<li><a href="#"> <i class="icon-arrow-down"></i> <span
										class="red">31</span> New Registrations
								</a></li>
								<li><a href="#"> <i class="icon-minus"></i> <span
										class="blue">93</span> New Articles
								</a></li>
								<li><a href="#"> <i class="icon-comment"></i> <span
										class="yellow">254</span> User reviews
								</a></li>
							</ul>
						</div>
					</div>
					<!--/span-->

					<div class="box span4">
						<div class="box-header well" data-original-title>
							<h2>
								<i class="icon-user"></i> Member Activity
							</h2>
							<div class="box-icon">
								<a href="#" class="btn btn-minimize btn-round"><i
									class="icon-chevron-up"></i></a> <a href="#"
									class="btn btn-close btn-round"><i class="icon-remove"></i></a>
							</div>
						</div>
						<div class="box-content">
							<div class="box-content">
								<ul class="dashboard-list">
									<li><a href="#"> <img class="dashboard-avatar"
											alt="Usman"
											src="http://www.gravatar.com/avatar/f0ea51fa1e4fae92608d8affee12f67b.png?s=50"></a>
										<strong>Name:</strong> <a href="#">Usman </a><br> <strong>Since:</strong>
										17/05/2012<br> <strong>Status:</strong> <span
										class="label label-success">Approved</span></li>
									<li><a href="#"> <img class="dashboard-avatar"
											alt="Sheikh Heera"
											src="http://www.gravatar.com/avatar/3232415a0380253cfffe19163d04acab.png?s=50"></a>
										<strong>Name:</strong> <a href="#">Sheikh Heera </a><br>
										<strong>Since:</strong> 17/05/2012<br> <strong>Status:</strong>
										<span class="label label-warning">Pending</span></li>
									<li><a href="#"> <img class="dashboard-avatar"
											alt="Abdullah"
											src="http://www.gravatar.com/avatar/46056f772bde7c536e2086004e300a04.png?s=50"></a>
										<strong>Name:</strong> <a href="#">Abdullah </a><br> <strong>Since:</strong>
										25/05/2012<br> <strong>Status:</strong> <span
										class="label label-important">Banned</span></li>
									<li><a href="#"> <img class="dashboard-avatar"
											alt="Saruar Ahmed"
											src="http://www.gravatar.com/avatar/564e1bb274c074dc4f6823af229d9dbb.png?s=50"></a>
										<strong>Name:</strong> <a href="#">Saruar Ahmed </a><br>
										<strong>Since:</strong> 17/05/2012<br> <strong>Status:</strong>
										<span class="label label-info">Updates</span></li>
								</ul>
							</div>
						</div>
					</div>
					<!--/span-->

					<div class="box span4">
						<div class="box-header well" data-original-title>
							<h2>
								<i class="icon-list-alt"></i> Realtime Traffic
							</h2>
							<div class="box-icon">
								<a href="#" class="btn btn-minimize btn-round"><i
									class="icon-chevron-up"></i></a> <a href="#"
									class="btn btn-close btn-round"><i class="icon-remove"></i></a>
							</div>
						</div>
						<div class="box-content">
							<div id="realtimechart" style="height: 190px;"></div>
							<p class="clearfix">You can update a chart periodically to
								get a real-time effect by using a timer to insert the new data
								in the plot and redraw it.</p>
							<p>
								Time between updates: <input id="updateInterval" type="text"
									value="" style="text-align: right; width: 5em">
								milliseconds
							</p>
						</div>
					</div>
					<!--/span-->
				</div>
				<!--/row-->

				<div class="row-fluid sortable"></div>
				<!--/row-->
				<!-- content ends -->
			</div>
			<!--/#content.span10-->
		</div>
		<!--/fluid-row-->
		<hr>

		<div class="modal hide fade" id="myModal">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h3>Settings</h3>
			</div>
			<div class="modal-body">
				<p>Here settings can be configured...</p>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
					class="btn btn-primary">Save changes</a>
			</div>
		</div>

		<!-- Header file -->
		<jsp:include page="100-footer.jsp" flush="true" />

	</div>
	<!--/.fluid-container-->

	<!-- Header file -->
	<jsp:include page="100-js.jsp" flush="true" />

</body>
</html>
